<template>
  <div class="mob-cost-type">
    <div style="margin-bottom: 5px">
      <span style="float: left">{{f_title}}</span>
      <van-image height="24" style="margin-left: 92px;" @click="addItem" v-if="page_type !== 'show' && !disabled"
                  src="/images/mob-icon-vf-04.svg"/>
    </div>

    <div v-for="(item, index) in reims" :key="item.uniqueId" class="item">
      <van-cell-group>
        <elm-mob-select v-model="item.col_1" url="/business/my/GetCostTypeData" label="费用科目" title="费用科目"
                        key-name="name" label-name="name" value-name="name" size="mini">
        </elm-mob-select>
        <elm-mob-code dict_type="bms_invoice_lx" v-model="item.col_2" label="发票类型" title="发票类型"></elm-mob-code>
        <van-field
            v-model="item.col_7"
            type="digit"
            label="发票张数"
            placeholder="请输入发票张数"
        />
        <van-field
            v-model="item.col_4"
            type="number"
            label="票面金额"
            placeholder="请输入票面金额"
        />
        <div style="text-align: center">
          <van-image height="24" @click="deleteItem(item)" src="/images/mob-icon-vf-06.svg"/>
        </div>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reims: []
    }
  },
  props: {
    f_title: {
      type: String,
      default: null
    },
    biz_id: {
      type: String,
      default: null
    },
    page_type: {
      type: String,
      default: 'create'
    },
    disabled:{ type: Boolean, default: false },
  },
  watch: {
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      let res = await elm.post('/system/login/flow/GetFWComSub', {biz_id: this.biz_id});
      this.reims = res;
    },
    addItem() {
      this.reims.push({biz_id: this.biz_id, col_1:'', col_2:'', col_7:'', col_4:'', uniqueId: new Date().getTime()});
    },
    deleteItem(item) {
      this.reims = this.reims.filter(p => !(p==item));
    }
  }
};
</script>

<style scoped>
.mob-cost-type {
  margin: 15px;
}
.mob-cost-type .item {
  margin-bottom: 10px;
}
</style>